<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath %>">
    <title>渠道管理</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <%-- 引用layui.css --%>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>js/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>css/common.css"/>
</head>
<body>
<div class="ibox">
    <div class="ibox-content bodycss">
        <!-- 表单搜索 开始 -->
        <section class="panel panel-padding ">
            <form class="layui-form layui-form-pane form-search" onsubmit="return false" method="get">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">渠道名称</label>
                    <div class="layui-input-inline">
                        <input name="channelName" id="channelName" value="" placeholder="请输入渠道名"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">所属供应商</label>
                    <div class="layui-input-inline">
                        <div style="width:150px">
                            <select name="supplierId" id="supplierId" >
                                <option value="">--请选择--</option>
                                <c:forEach var="obj" items="${data}">
                                    <option value="${obj.supplierId}">${obj.supplierName}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <button class="layui-btn layui-btn-primary" lay-submit lay-filter="search">
                        <i class="layui-icon"></i> 搜 索
                    </button>
                </div>
            </form>
        </section>
        <!-- 表单搜索 结束 -->

        <section class="panel panel-padding ">

            <div class="ibox-toolbar">
                <button id="addMls" data-modal="" data-title="新增渠道" class="layui-btn layui-btn-sm">
                    <i class="layui-icon">&#xe61f;</i> 新增渠道
                </button>
            </div>

            <table class="layui-table"
                   lay-data="{
	                        id: 'mlsTableReload',
	                        width:'auto',
	                        url:'CGGL020/mlsList.do',
	                        page:true,
	                        even:true,
	                        skin:'row',
	                        limits:[10,20,30,40,50],
	                        limit:10
	                        }"
                   lay-filter="popedomLay">
                <thead>
                <tr>
                    <th lay-data="{checkbox:true,disabledKey:'check_status',disabledKeyValue:'1,2'}"></th>
                    <th lay-data="{type:'numbers', width:50}">序号</th>
                    <th lay-data="{field:'channelName', width:200,align:'center'}">渠道名称</th>
                    <th lay-data="{field:'channelCode', width:120, align:'center'}">渠道代码</th>
                    <th lay-data="{field:'supplierName', width:200,align:'center',templet:'#sl_name'}">所属供应商</th>
                    <th lay-data="{field:'channelDesc', width:200,align:'center'}">渠道描述</th>
                    <th lay-data="{field:'createTime', width:200,align:'center'}">创建时间</th>
                    <%--<th lay-data="{field:'channelId', width:200,align:'center'}">channelId</th>--%>
                    <th lay-data="{fixed:'right', width:200, align:'center', toolbar: '#popedomBar' }">操作</th>
                </tr>
                </thead>

            </table>
        </section>
    </div>
</div>


<script type="text/html" id="popedomBar">
    <a class="layui-btn layui-bg-cyan layui-btn-xs"  lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/javascript" src="<%=basePath %>js/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: "<%=basePath%>js/common/"
    }).use(["common", "element", "layer", "form", "table", "jquery"], function () {
        var elem = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;
        layui.common.init();

        $("#addMls").on("click",function () {
            layer.open({
                type: 2,
                title: '添加渠道',
                content: 'CGGL020/add.do',
                area: ['500px', '500px'],
                anim: 5,
                isOutAnim: true,
                maxmin: true,
                resize: false,
                moveOut: true,
                zIndex: 99999,
                end : function(){
                    table.reload("mlsTableReload");
                }
            });
        });


        table.on('tool(popedomLay)', function(obj){
            var data = obj.data;            //获得当前行数据
            var layEvent = obj.event;       //获得 lay-event 对应的值
            var tr = obj.tr;                //获得当前行 tr 的DOM对象

            if(layEvent === 'del'){  //删除
                layer.open({
                    icon:3,
                    title: "删除",
                    content : "确认删除？",
                    btn: ['确认', '取消'],
                    yes: function(index, layero){
                        /*console.log(data.channelId)*/
                        $.ajax({
                            type:"post",
                            url:'CGGL020/delChannel.do',
                            data:{channelId : data.channelId},
                            dataType:"json",
                            success:function(json){
                                if(json.statusCode == 200){
                                    table.reload("mlsTableReload", {});
                                    layer.msg("删除成功", {icon: 6,time: 2000});
                                }else{
                                    layer.msg("删除失败", {icon: 5,time: 2000});
                                }
                            }
                        });
                    },
                    btn2: function(index, layero){ }
                });

            } else if(layEvent === 'edit'){ //编辑
                layer.open({
                    type: 2,
                    title: '修改渠道',
                    content: 'CGGL020/editChannelPage.do?channelId='+data.channelId,
                    area: ['800px', '400px'],
                    anim: 5,
                    isOutAnim: true,
                    maxmin: true,
                    resize: false,
                    moveOut: true,
                    zIndex: 99999,
                    success: function(layero, index){
                        var body = layer.getChildFrame('body', index);  //巧妙的地方在这里哦
                        /*console.log(data.channelName)
                        console.log(data.supplierName)
                        console.log(data.supplierId)
                        console.log(data.channelId)
                        console.log(data.channelCode)
                        console.log(data.channelDesc)*/
                        body.contents().find("#channelName").val(data.channelName);
                        body.contents().find("#defult_supplierId").val(data.supplierId);
                        body.contents().find("#supplierName").val(data.supplierName);
                        body.contents().find("#channelId").val(data.channelId);
                        body.contents().find("#channelCode").val(data.channelCode);
                        body.contents().find("#channelDesc").val(data.channelDesc);
                    },
                    end : function(){
                        table.reload("mlsTableReload");
                    }
                });
            }
        });



        /**
         * 监听刷新表格
         */
        form.on('submit(search)', function (data) {
            /*console.log(JSON.stringify(data.field));*/
            table.reload('mlsTableReload', {
                where: data.field,
                page: {
                    curr: 1
                }
            });
            return false;
        });

    });
</script>
</body>
</html>
